<!--html代码-->
<template>
  <!--  只能有一个根标签-->
  <div>
    <h1>{{message}}</h1>
    <!--    跳转方式1：超链接-->
    <router-link to="/page1?username=张三">超链接跳转页面1</router-link>
    <br>
    <router-link to="/page2?username=王五">超链接跳转页面2</router-link>
    <br>
    <button @click="jumpToPage1">JS跳转页面1</button>
    <br>
    <button @click="jumpToPage2">JS跳转页面2</button>
    <br>
    <router-link to="/student">学生页面</router-link>
    <!--    路由视图，挂载子页面-->
    <router-view/>
  </div>
</template>
<!--js代码-->
<script>
export default {
  name: "Index",
  data(){        //定义数据
    return {
      message: 'Hello Vue-Cli!!!'
    }
  },
  methods:{
    jumpToPage1(){
      //跳转方式2：JS代码跳转
      this.$router.push({path:'/page1',query:{username:'李四'}})
    },
    jumpToPage2(){
      //跳转方式2：JS代码跳转
      this.$router.push({path:'/page2',query:{username:'赵六'}})
    }
  }
}
</script>

<!--css代码-->
<style scoped>

</style>